<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="基地信息"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false"
			@scrolltolower="loadMore" @scrolltoupper="refresh">
			<free-divider></free-divider>

			<view class="pl-2 pr-2 py-3">
				<view class="dfex border-bottom mt-2 pb-3" v-for="(item,index) in list">
					<view class="lineHight-2" @click="open('tabbar/user/baseDilis',item.id)">
						<view class="font-14">{{item.baseName}}</view>
						<view class="font-12 text-A0A0A0">{{item.baseAddress}}</view>
					</view>
					<view class="dfes">
						<view class="mr-4  font-24 iconfont icon-xiugai"
							@click="open('tabbar/user/baseEditing',item.id)"></view>
						<view class=" font-24 iconfont icon-shanchu" @click="deleteMy(item.id)"></view>
					</view>
				</view>
				<view v-if="!hasMore && list.length > 0" class="text-center mt-3 mb-3">
					<view class="text-muted">没有更多数据了</view>
				</view>
				<view v-else-if="!hasMore && list.length === 0" class="text-center mt-3 mb-3">
					<view class="iconfont text-999999 icon-zanwushuju font-48 pb-1"></view>
					<view class="text-999999 font-15">暂无数据</view>
				</view>
				<view v-else class="text-center mt-3 mb-3">
					<view class="btn btn-primary">加载更多</view>
				</view>
			</view>

			<ferrButton title=" 新增基地信息" @click="suminAdd"></ferrButton>
			<!-- 修改名字|修改微信号 弹框-->
			<free-confirm ref="confirm" :title="confirmTitle">
				<view class="pl-3">
					<u-form :model="add" ref="uForm">
						<u-form-item required label-width="180" label="基地名称" prop="baseName">
							<u-input class="mr-3 " v-model="add.baseName" input-align="right" />
						</u-form-item>
						<u-form-item required label-width="180" label="联系人" prop="contacts">
							<u-input class="mr-3 " v-model="add.contacts" input-align="right" />
						</u-form-item>
						<u-form-item required label-width="180" label="联系电话" prop="phone">
							<u-input class="mr-3 " maxlength="11" v-model="add.phone" input-align="right" />
						</u-form-item>
						<u-form-item required label-width="180" label="基地位置" prop="baseAddress">
							<u-input class="mr-3 " v-model="add.baseAddress" input-align="right" />
						</u-form-item>
						<u-form-item required label-width="180" label="基地面积(m²)" prop="baseArea">
							<u-input class="mr-3 " v-model="add.baseArea" input-align="right" />
						</u-form-item>
						<u-form-item required label-width="180" label="产品介绍" prop="productIntroduce">
							<u-input class="mr-3 " v-model="add.productIntroduce" input-align="right" />
						</u-form-item>
						<u-form-item required label-width="150" label="图片上传">
							<u-upload ref="uUpload" :max-size="4 * 1024 * 1024" :form-data="{'biz':'temp'}"
								:header="header" @on-success="uploadSuccess" :action="getUploadUrl()"
								max-count="1"></u-upload>
						</u-form-item>
						<view class="font-12 text-999999 pl-1">图片大小限制不能超过4MB</view>
					</u-form>
				</view>

			</free-confirm>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import freeDivider from "@/components/free-ui/free-divider.vue";
	export default {
		components: {
			freeConfirm,
			ferrButton,
			freeDivider
		},
		data() {
			return {
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				confirmType: "",
				confirmText: '',

				list: [],
				header: $H.getTokenHeader(),
				add: {
					baseAddress: "",
					baseArea: "",
					baseName: "",
					basePhoto: "",
					contacts: "",
					id: "",
					phone: "",
					productIntroduce: "",
				},

			}
		},
		computed: {
			confirmTitle() {
				return this.confirmType == 'username' ? '新增基地信息' : '新增基地信息'
			},
		},
		onShow() {
			this.NewList();
		},

		methods: {

			NewList() {
				$H.get('/agriculture/baseInform/agriculture/list', {
					...this.form
				}, {}).then(res => {
					this.list = res.result.records
					this.form.total = res.result.total;
					this.hasMore = this.list.length < this.form.total;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			deleteMy(id) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							$H.del(
								`/agriculture/baseInform/agriculture/delete?id=${id}`, {}, {
									token: true,
									header: {
										'Content-Type': 'application/x-www-form-urlencoded',
									}
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									_this.NewList();
									_this.list = []
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除取消',
								icon: 'none',
							})
						}
					},
				})
			},
			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.list = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
			getUploadUrl(url) {
				return $H.getFullUrl('sys/common/upload');
			},
			uploadSuccess(response) {
				if (response.code === 200) {
					this.form.basePhoto = [{
						url: response.data,
						message: response.message
					}];
				}
			},
			validatePhoneNumber(phoneNumber) {
				const regex = /^1\d{10}$/;
				return regex.test(phoneNumber);
			},
			// 点击弹框
			suminAdd() {
				this.$refs.confirm.show((close) => {
					// 在确认弹窗回调中进行表单验证和提交操作
					this.$refs.uForm.validate(valid => {
						if (valid) {
							if (!this.validatePhoneNumber(this.add.phone)) {
								uni.showToast({
									title: "手机号码格式错误",
									icon: "error"
								});
								return;
							}
							// 其他逻辑保持不变
							let files = this.$refs.uUpload.lists.filter(val => {
								return val.progress == 100;
							});
							if (files.length == 0) {
								uni.showToast({
									title: '请上传文件',
									icon: 'none'
								});
								return;
							}
							const userId = $U.getStorage("id");
							let o = {
								...this.add,
								id: userId,
								basePhoto: files[0].response.message
							};

							$H.post(`/agriculture/baseInform/agriculture/add`, o, {})
								.then((res) => {
									if (res.code === 200) {
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 4000
										});
										this.NewList();
										this.list = [];
										// 确认后关闭
										close();
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
										});
									}
								})
								.catch(() => {
									uni.showToast({
										title: '编辑失败',
										icon: 'none',
									});
								});
						} else {
							uni.showToast({
								title: "请完整填写表单",
								icon: 'none'
							});
						}
					});
				});
			},

			open(path, id) {
				uni.navigateTo({
					url: '/pages/' + path + '?id=' + id
				})
			},

		}
	}
</script>

<style>
</style>